import * as React from 'react'
import * as ReactDOM from 'react-dom'

type CardOption = {
    card: sanguosha.request['cardsGetCards']['resolve'][0]
    width?: number
    height?: number
}

import '@/style/card.scss'
import * as konvaR from 'react-konva'
import Konva from 'konva'
import { connect } from 'react-redux'
import { sendMessage } from 'chatAction'


export function Card(props: CardOption) {
    let [card] = React.useState(props.card)
    let [test, setTest] = React.useState(new Image())
    let width = props.width || 185
    let height = props.height || 250


    React.useEffect(() => {
        const image = new Image()
        image.src = card.cardInfo.cardImage
        image.width = width
        image.height = height
        setTest(image)
    }, [])


    function send() {
        props
    }

    return (
        <div className='card-style' style={{ fontSize: 11 }} onClick={send}>
            <konvaR.Stage className='card-cvs' width={width} height={height} >
                <konvaR.Layer>
                    <konvaR.Image image={test}></konvaR.Image>
                </konvaR.Layer>
            </konvaR.Stage>
        </div>
    )
}



export default connect(state => ({ send: sendMessage }), {})(Card)